<template>
  <div class="form_box">
    <div class="header">
      <a-breadcrumb>
        <a-breadcrumb-item><a @click="navBack">返回上一页</a></a-breadcrumb-item>
        <a-breadcrumb-item>发布资源</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="标题"
        name="username"
        :rules="[{ required: true, message: '请输入标题' }]"
      >
        <a-input
          v-model:value="formState.username"
          placeholder="请输入描述信息"
        />
      </a-form-item>

      <a-form-item
        label="描述"
        name="password"
        :rules="[{ required: true, message: '请输入描述信息' }]"
      >
        <!-- <a-input-password v-model:value="formState.password" /> -->
        <a-textarea
          v-model:value="formState.password"
          placeholder="请描述详细信息"
          :rows="4"
        />
      </a-form-item>
     
      <a-form-item
        label="收益"
        name="income"
        :rules="[{ required: true, message: '请输入收益' }]"
      >
        <a-input
          v-model:value="formState.income"
          placeholder="请输入收益"
          type="number"
        />
      </a-form-item>
      <a-form-item
        label="封面图片"
        
        :rules="[{ required: true, message: '请输上传资源信息' }]"
      >
        <a-upload
          name="file"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
        <div class="ant-upload-text" > <PlusOutlined style="font-size: 40px; color: #545151;" /></div>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="上传资源"
        name="resources"
        :rules="[{ required: true, message: '请输上传资源信息' }]"
      >
        <a-upload
          name="file"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <a-button>
            <upload-outlined></upload-outlined>
           请上传资源
          </a-button>
        </a-upload>
      </a-form-item>
      <!-- <a-form-item name="remember">
        <a-checkbox v-model:checked="formState.remember"
          >Remember me</a-checkbox
        >
      </a-form-item> -->

      <a-form-item>
        <a-button type="primary" html-type="submit">发布</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
  <script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';
import {
  PlusOutlined
} from "@ant-design/icons-vue"
const key = '加载中';
const router = useRouter();
interface FormState {
  username: string;
  password: string;
  remember: boolean;
  resources: any;
  income:number | string
}

const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
  resources: "",
  income:""
});
const onFinish = (values: any) => {
  console.log("Success:", values);
  message.loading({ content: 'Loading...', key });
  setTimeout(() => {
    message.success({ content: '发布成功!', key, duration: 2 });
  }, 1000);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
  message.loading({ content: 'Loading...', key });
  setTimeout(() => {
    message.error({ content: '发布失败!', key, duration: 2 });
  });
};

const navBack = () => {
  router.go(-1);
};
</script>
  <style lang="scss" scoped>
.form_box {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px;
  .header {
    margin: 30px 0;
  }
}
.ant-upload-text {
  width: 128px;
  height: 128px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 20px;
}
</style>